<template>
  <div class="social-page">
    <div class="page-header gradient-header">
      <h1>社交互动</h1>
      <p>连接师生，促进交流，共建智慧校园社区</p>
    </div>
    <!-- 功能模块卡片 -->
    <div class="social-modules">
      <el-row :gutter="24" justify="center">
        <!-- 班级圈 -->
        <el-col :xs="24" :sm="12" :md="8">
          <div class="module-card gradient-card" @click="goToClassCircle">
            <div class="card-icon">
              <el-icon :size="52">
                <School />
              </el-icon>
            </div>
            <div class="card-content">
              <h3>班级圈</h3>
              <p>教师创建班级圈，学生加入交流，促进师生互动</p>
              <div class="card-stats">
                <span class="stat-num">{{ classCircleStats.total }}</span><span>个班级圈</span>
                <span class="stat-num">{{ classCircleStats.members }}</span><span>名成员</span>
              </div>
            </div>
            <div class="card-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </el-col>
        <!-- 兴趣社群 -->
        <el-col :xs="24" :sm="12" :md="8">
          <div class="module-card gradient-card" @click="goToInterestCommunity">
            <div class="card-icon">
              <el-icon :size="52">
                <UserFilled />
              </el-icon>
            </div>
            <div class="card-content">
              <h3>兴趣社群</h3>
              <p>基于兴趣的社群交流，丰富校园文化生活</p>
              <div class="card-stats">
                <span class="stat-num">{{ interestCommunityStats.total }}</span><span>个社群</span>
                <span class="stat-num">{{ interestCommunityStats.members }}</span><span>名成员</span>
              </div>
            </div>
            <div class="card-arrow">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import {
  School,
  UserFilled,
  ArrowRight
} from '@element-plus/icons-vue'
import { classCircleApi, interestCommunityApi } from '@/api/social'

export default {
  name: 'SocialPage',
  components: {
    School,
    UserFilled,
    ArrowRight
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const userInfo = computed(() => store.getters['user/userInfo'])
    const isAdmin = computed(() => userInfo.value && userInfo.value.role === 'ADMIN')
    
    // 班级圈统计
    const classCircleStats = ref({
      total: 0,
      members: 0
    })
    
    // 兴趣社群统计
    const interestCommunityStats = ref({
      total: 0,
      members: 0
    })

    // 跳转到班级圈页面
    const goToClassCircle = () => {
      if (isAdmin.value) {
        router.push('/admin/class-circle-manage')
      } else {
      router.push('/social/class-circle')
      }
    }

    // 跳转到兴趣社群页面
    const goToInterestCommunity = () => {
      if (isAdmin.value) {
        router.push('/admin/interest-community-manage')
      } else {
      router.push('/social/interest-community')
    }
    }

    // 返回首页
    const goBackHome = () => {
      router.push('/')
    }


    // 加载数据
    const loadData = async () => {
      try {
        if (isAdmin.value) {
          // 管理员统计所有班级圈
          const allCircles = await classCircleApi.getAllClassCircles()
          if (allCircles.code === 200 && allCircles.data) {
            classCircleStats.value.total = allCircles.data.length
            classCircleStats.value.members = allCircles.data.reduce((sum, c) => sum + (c.memberCount || 0), 0)
          }
          // 管理员统计所有兴趣社群
          const allCommunities = await interestCommunityApi.getAllCommunities()
          if (allCommunities.code === 200 && allCommunities.data) {
            interestCommunityStats.value.total = allCommunities.data.length
            interestCommunityStats.value.members = allCommunities.data.reduce((sum, c) => sum + (c.memberCount || 0), 0)
          }
        } else {
          // 普通用户统计
        const joinedResponse = await classCircleApi.getMyJoinedCircles()
        if (joinedResponse.code === 200 && joinedResponse.data) {
          classCircleStats.value.total = joinedResponse.data.length
          classCircleStats.value.members = joinedResponse.data.reduce((sum, circle) => sum + (circle.memberCount || 0), 0)
        }
        const communityResponse = await interestCommunityApi.getMyJoinedCommunities()
        if (communityResponse.code === 200 && communityResponse.data) {
          interestCommunityStats.value.total = communityResponse.data.length
          interestCommunityStats.value.members = communityResponse.data.reduce((sum, community) => sum + (community.memberCount || 0), 0)
          }
        }
        
      } catch (error) {
        console.error('加载数据失败:', error)
        ElMessage.error('加载数据失败')
      }
    }

    onMounted(() => {
      loadData()
    })

    return {
      classCircleStats,
      interestCommunityStats,
      goToClassCircle,
      goToInterestCommunity,
      goBackHome,
      isAdmin
    }
  }
}
</script>

<style scoped>
.social-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  background: linear-gradient(90deg, #409EFF 0%, #1566d6 100%);
  border-radius: 18px;
  padding: 40px 0 32px 0;
  text-align: center;
  margin-bottom: 48px;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.10);
}
.page-header h1 {
  font-size: 38px;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}
.page-header p {
  font-size: 18px;
  color: #e6f1fd;
  margin: 0;
  letter-spacing: 1px;
}

.social-modules {
  margin-bottom: 40px;
}

.module-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px 28px 28px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 2px 16px rgba(64,158,255,0.08);
  position: relative;
  overflow: hidden;
  margin-bottom: 32px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid transparent;
}

.gradient-card {
  border-image: linear-gradient(120deg, #409EFF 0%, #1566d6 100%) 1;
}

.module-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 32px rgba(64,158,255,0.18);
  border-color: #409EFF;
}

.card-icon {
  color: #409EFF;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
}

.card-content h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #409EFF;
  font-weight: 700;
  text-align: center;
}

.card-content p {
  color: #666;
  line-height: 1.7;
  margin-bottom: 18px;
  text-align: center;
}

.card-stats {
  display: flex;
  gap: 8px;
  font-size: 16px;
  color: #409EFF;
  justify-content: center;
  align-items: baseline;
  font-weight: 500;
}

.stat-num {
  font-size: 22px;
  font-weight: bold;
  color: #409EFF;
  margin: 0 2px;
}

.card-arrow {
  position: absolute;
  top: 28px;
  right: 28px;
  color: #e6f1fd;
  font-size: 22px;
  transition: color 0.2s;
}
.module-card:hover .card-arrow {
  color: #409EFF;
}

@media (max-width: 900px) {
  .social-page {
    padding: 10px;
  }
  .page-header {
    padding: 28px 0 18px 0;
    margin-bottom: 28px;
  }
  .module-card {
    padding: 22px 12px 18px 12px;
    min-height: 160px;
  }
  .card-content h3 {
    font-size: 18px;
  }
  .stat-num {
    font-size: 18px;
  }
}
</style> 